import React, { useState, useEffect } from 'react'
import { Toast } from 'antd-mobile';
import Header from 'components/Header'
import Footer from 'components/Footer'
import DownPop from 'components/DownPop'
import { openApp } from "../../utils/helper";
import './shopdetail.css'
import merchant, { MerchantShopVO } from '../../api/merchant'
import mall, { ProductVO } from '../../api/mall'
import { isWeiXin, wxShare, isMobileQQ, qqShare } from 'utils/wxShare'

const ShopDetailPage: PageComponent = props => {
    const [shopDetail, setShopDetail] = useState({} as MerchantShopVO)
    const [merchantId, setMerchantId] = useState()
    useEffect(() => {
        const kid = props.match.params.kid
        // 获取数据商户信息
        if (kid) {
            const link = `${window.location.origin}/shopdetail/share/` + kid
            console.log('kid - - : ', kid)
            merchant.merchants.shopBaseInfo({ kid: kid }).then((data) => {
                console.log('店铺 - - :', data)
                if (!data) return
                setShopDetail(data)
                const { shopName, shopLogo } = data
                if (isWeiXin()) {
                    wxShare({
                        title: shopName,
                        desc: '我在拾恋App发现了一个不错的店铺......',
                        link: `${window.location.href}`,
                        imgUrl: shopLogo
                    })
                }
                if (isMobileQQ()) {
                    qqShare({
                        title: shopName,
                        desc: '我在拾恋App发现了一个不错的店铺......',
                        link: `${window.location.href}`,
                        imgUrl: shopLogo
                    })
                }

            })
            setMerchantId(kid)
            getTypeItem(kid)

            var openParam = {
                router: 'shopDetail',
                passprops: 'shopId',
                id: kid,
                isRn:false,
                isunique:true
            }
            setOpenAppParams(openParam)                       // 设置打开App 的参数
        }

    }, [])
    const [sortType, setSortType] = useState(1)
    const [sortRise, setSortRise] = useState(0)
    const clickSortType = (index: number) => {
        setSortType(index)
        if (index == 2) {
            if (sortRise == 0) {
                setSortRise(1)
            } else if (sortRise == 1) {
                setSortRise(0)
            }
        }
        getTypeItem(merchantId)
    }
    const [productList, setProductList] = useState([] as ProductVO[])
    const getTypeItem = (merchantid: number) => {
        let param = {
            keyWord: '',
            merchantId: merchantid || merchantId,     //  商户店铺id
            pageNo: 1,
            pageSize: 10,
            sortRise: sortRise,
            sortType: sortType
        }
        console.log('请求 列表 参数 - - - :', param)
        mall.products.getShopDetailInfo(param).then((data) => {
            console.log(' - - data - - : ', data)
            if (data && data.entities) {
                setProductList(data.entities)
            }
        })
    }

    /**
     * 页面点击操作   打开app指定页面 或者 引导下载  oppen app
     */
    const [openAppParams, setOpenAppParams] = useState({})       //   打开app 指定页面 要传给app的参数
    const [downShowPop, setDownShowPop] = useState(false)        //   显示引导弹窗
    const showDownPopHandle = (isShow: boolean) => {
        console.log('isShow - - :', isShow)
        setDownShowPop(isShow)
    }
    const callback = (val: boolean) => {
        setDownShowPop(val)
    }
    const clickHandle = () => {
        console.log('打开app 页面的参数 - — — :', openAppParams)
        const result = openApp(openAppParams)
        console.log(' - - clickHandle - - : ', result)
        if (result) {
            setDownShowPop(true)
        } else {
            setDownShowPop(false)
        }
    }

    return (
        <div className="ShopDetail">
            {openAppParams && openAppParams.hasOwnProperty('router') ? <Header openAppParam={openAppParams} handleData={showDownPopHandle} /> : ''}
            {<DownPop isShow={downShowPop} callback={callback}></DownPop>}

            {shopDetail ?
                <div className="shopTop" onClick={clickHandle}>
                    <div className="leftp">
                        <img src={shopDetail.shopLogo} alt="" />
                        <div className="txt-info">
                            <div className="shopName">{shopDetail.merchantName}</div>
                            <div className="peraManth">月销量:{shopDetail.productCount} </div>
                        </div>
                    </div>
                    <div className="rightp">
                        <div className="linaxi">
                            {/*<img src="" alt=""/>*/}
                            联系客服
                    </div>
                        <img src={require('../../assets/image/arrow-right.png')} alt="" />
                    </div>
                </div>
                : ''}
            <div className="cont-divide"></div>
            <div className="tabs-item">
                <div className={sortType == 1 ? 'item active' : 'item '} onClick={() => clickSortType(1)}>人气</div>
                <div className={sortType == 2 ? 'item price- active' : 'item price-'} onClick={() => clickSortType(2)}>价格
                    <div className="right-icon">
                        {
                            sortType == 2 && sortRise == 1 ? <img className="topIcon" src={require('../../assets/image/shop/up-active.png')} alt="" /> :
                                <img className="topIcon" src={require('../../assets/image/shop/up-die.png')} alt="" />
                        }
                        {
                            sortType == 2 && sortRise == 1 ? <img className="botIcon" src={require('../../assets/image/shop/down-die.png')} alt="" /> :
                                sortType != 2 ? <img className="botIcon" src={require('../../assets/image/shop/down-die.png')} alt="" /> :
                                    <img className="botIcon" src={require('../../assets/image/shop/down-active.png')} alt="" />
                        }

                    </div>
                </div>
                <div className={sortType == 3 ? 'item active' : 'item '} onClick={() => clickSortType(3)}>新品</div>
            </div>
            <div className="list-product">
                {
                    productList.map((item, index) => (
                        <div key={index} className="item" onClick={clickHandle}>
                            <img className="pro-img" src={item.mainPic} alt="" />
                            <div className="tags">
                                {item.standard ? <span className="item">{item.standard}</span> : ''}
                                {item.grades ? <span className="item">{item.grades}</span> : ''}
                            </div>
                            <div className="pro-name">{item.productName}
                            </div>
                            <div className="price-line">
                                <span className="nowPrice">
                                    ¥<span className="integer">{(item.salePrice / 100 + '').split('.')[0]}</span>.{(item.salePrice / 100 + '').split('.')[1] || '00'}
                                </span>
                                <span className="oldPrice">¥{(item.originalPrice / 100).toFixed(2)}</span>
                            </div>
                        </div>
                    ))
                }
            </div>
            <div className="footer-no-more">
                - 已经到底了哦 -
            </div>

            <div className="footer" onClick={clickHandle}>
                <Footer />
            </div>

        </div>
    )
}
ShopDetailPage.options = { disableHeader: false, wrapperClassName: '' }
export default ShopDetailPage